<template>
    <div class="layout">
        <br>

        <!--<el-alert-->
                <!--title="成功提示的文案"-->
                <!--type="success">-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="消息提示的文案"-->
                <!--type="info">-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="警告提示的文案"-->
                <!--type="warning">-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="错误提示的文案"-->
                <!--type="error">-->
        <!--</el-alert>-->

        <!--<el-alert-->
                <!--title="不可关闭的 alert"-->
                <!--type="success"-->
                <!--:closable="false">-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="自定义 close-text"-->
                <!--type="info"-->
                <!--close-text="知道了">-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="设置了回调的 alert"-->
                <!--type="warning"-->
                <!--@close="hello">-->
        <!--</el-alert>-->


        <!--<el-alert-->
                <!--title="成功提示的文案"-->
                <!--type="success"-->
                <!--show-icon>-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="消息提示的文案"-->
                <!--type="info"-->
                <!--show-icon>-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="警告提示的文案"-->
                <!--type="warning"-->
                <!--show-icon>-->
        <!--</el-alert>-->
        <!--<el-alert-->
                <!--title="错误提示的文案"-->
                <!--type="error"-->
                <!--show-icon>-->
        <!--</el-alert>-->


        <!--<el-alert-->
                <!--title="带辅助性文字介绍"-->
                <!--type="success"-->
                <!--description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">-->
        <!--</el-alert>-->


        <el-alert
                title="成功提示的文案"
                type="success"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
        </el-alert>
        <el-alert
                title="消息提示的文案"
                type="info"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
        </el-alert>
        <el-alert
                title="警告提示的文案"
                type="warning"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
        </el-alert>
        <el-alert
                title="错误提示的文案"
                type="error"
                description="文字说明文字说明文字说明文字说明文字说明文字说明"
                show-icon>
        </el-alert>


        <br>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

        <el-dialog :modal="true"
                   title="提示"
                   :visible.sync="dialogVisible"
                   size="tiny"
                   :before-close="handleClose">
            <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>


        <br>

        <el-button type="text" @click="open">点击打开 Message Box</el-button>

        <br>

        <el-button type="text" @click="open2">点击打开 Message Box</el-button>

        <br>

        <el-button type="text" @click="open3">点击打开 Message Box</el-button>

        <br>

        <el-button type="text" @click="open4">点击打开 Message Box</el-button>


        <br>

        <el-button
                type="primary"
                @click="openFullScreen"
                v-loading.fullscreen.lock="fullscreenLoading">
            显示整页加载，3 秒后消失
        </el-button>

    </div>
</template>
<style>

</style>
<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                fullscreenLoading: false
            };
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                        .then(_ => {
                    done();
            })
            .catch(_ => {});
            },
            open() {
                this.$alert('这是一段内容', '标题名称', {
                            confirmButtonText: '确定',
                            callback: action => {
                            this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
            }
            });
            },

            open2() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            },

            open3() {
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                    type: 'success',
                    message: '你的邮箱是: ' + value
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
            },


            open4() {
                const h = this.$createElement;
                this.$msgbox({
                            title: '消息',
                            message: h('p', null, [
                                h('span', null, '内容可以是 '),
                                h('i', { style: 'color: teal' }, 'VNode')
                            ]),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                            if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';
                    setTimeout(() => {
                        done();
                    setTimeout(() => {
                        instance.confirmButtonLoading = false;
                }, 300);
                }, 3000);
                } else {
                    done();
                }
            }
            }).then(action => {
                    this.$message({
                    type: 'info',
                    message: 'action: ' + action
                });
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
            },


            hello() {
                alert('Hello World!');
            },

            openFullScreen() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.fullscreenLoading = false;
            }, 3000);
            },




        }
    };
</script>
